<template>
    <div class="cephalosme-wrapper">
        <div class="cep_left_box">
            <a-space :size="6">
                <dv-border-box10 style="width: 180px; height: 38px;">
                    <PunitSelect />
                </dv-border-box10>
                <div class="panelbox">
                    <div class="label">刷脸开门</div>
                    <div class="value">34</div>
                </div>
                <div class="panelbox">
                    <div class="label">手机开门</div>
                    <div class="value">520</div>
                </div>
                <div class="panelbox">
                    <div class="label">刷卡开门</div>
                    <div class="value">1245</div>
                </div>
            </a-space>
        </div>
        <div class="cep_center_title">
            <h1>公租房可视化平台</h1>
        </div>
        <div class="cep_right_box">
            <a-space :size="6">
                <div class="panelbox">
                    <div class="label">二维码开门</div>
                    <div class="value">123</div>
                </div>
                <div class="panelbox">
                    <div class="label">密码开门</div>
                    <div class="value">123</div>
                </div>
                <div class="panelbox">
                    <div class="label">呼叫开门</div>
                    <div class="value">123</div>
                </div>
                <div style="margin-left: 50px;"><time-walker /></div>
            </a-space>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PunitSelect } from '@/components/PunitSelect';
import { TimeWalker } from '@/components/time-walker';
</script>

<style lang="less" scoped>
.cephalosme-wrapper {
    display: flex;
    justify-content: space-between;
    color: #fff;
    .cep_center_title {
        width: 500px;
        height: 90px;
        background: url('@/assets/image/head_title_bg.png') 100% no-repeat;
        background-size: cover;
        text-align: center;
        h1 {
            margin: 0;
            margin-top: 15px;
            font-size: 28px;
            letter-spacing: 20px;
        }
    }
    .cep_left_box {
        padding-top: 10px;
        padding-left: 20px;
        .panelbox {
            width: 160px;
            height: 65px;
            background: url('@/assets/image/num_left_bg.png') 100% no-repeat;
            background-size: cover;
            padding: 4px 40px;
            box-sizing: border-box;
            .label {
                margin-top: 4px;
                text-align: left;
                color: #c1e7ff;
                font-family: PingFang SC;
            }
            .value {
                margin-top: 4px;
                text-align: right;
                font-size: 18px;
                color: #06EDA7;
                font-weight: 500;
                font-family: AZ;
            }
        }
        
    }
    .cep_right_box {
        padding-top: 10px;
        padding-right: 20px;
        .panelbox {
            width: 160px;
            height: 65px;
            background: url('@/assets/image/num_right_bg.png') 100% no-repeat;
            background-size: cover;
            padding: 4px 40px;
            box-sizing: border-box;
            .label {
                margin-top: 4px;
                text-align: right;
                color: #c1e7ff;
                font-family: PingFang SC;
            }
            .value {
                margin-top: 4px;
                text-align: left;
                font-size: 18px;
                color: #06EDA7;
                font-weight: 500;
                font-family: AZ;
            }
        }
    }
}
</style>